<template>
  <div class="dialog">

    <el-dialog
        :title="dialog.title"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :modal-append-to-body="false"
        :visible.sync="dialog.show">
      <el-form :model="form" :rules="rules" ref="form">

        <el-form-item label="收支类型:" :label-width="formLabelWidth">
          <el-select v-model="form.type" placeholder="请选择收支类型">
            <el-option
                v-for="(formtype, index) in format_type_list"
                :key="index"
                :label="formtype"
                :value="formtype"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="describe" label="收支描述:" :label-width="formLabelWidth">
          <el-input v-model="form.describe" type="describe"></el-input>
        </el-form-item>

        <el-form-item prop="income" label="收入:" :label-width="formLabelWidth">
          <el-input v-model="form.income" type="income"></el-input>
        </el-form-item>

        <el-form-item prop="expend" label="支出:" :label-width="formLabelWidth">
          <el-input v-model="form.expend" type="expend"></el-input>
        </el-form-item>

        <el-form-item prop="cash" label="现金:" :label-width="formLabelWidth">
          <el-input v-model="form.cash" type="cash"></el-input>
        </el-form-item>

        <el-form-item label="备注:" :label-width="formLabelWidth">
          <el-input v-model="form.remark" type="textarea"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">提 交</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
  import { add } from "../utils/api"
  export default {
    name: "Dialog",
    props: {
      dialog: Object,
      form: Object
    },
    data(){
      return {
        formLabelWidth: '120px',
        format_type_list: ["提现","提现手续费","充值","优惠劵","充值礼券","转账"],
        rules: {
          describe: [
            {
              required: true,
              message: '请填写收支描述',
              trigger: 'blur'
            }
          ],
          income: [
            {
              required: true,
              message: '请填写收入金额',
              trigger: 'blur'
            }
          ],
          expend: [
            {
              required: true,
              message: '请填写支出金额',
              trigger: 'blur'
            }
          ],
          cash: [
            {
              required: true,
              message: '请填写账户现金余额',
              trigger: 'blur'
            }
          ]
        }

      }
    },
    computed: {
      user(){
        return this.$store.getters.user;
      }
    },
    methods: {
      onSubmit(form){
        // console.log(this.form);
        if(this.user.identity !== 'manager') return; //不是管理员不能添加
        this.$refs[form].validate(valid => {
          if(valid){
            const option = this.dialog.option == 'add' ? 'add' : `edit/${this.form.id}`;
            const msg = this.dialog.option == 'add' ? '添加成功' : '编辑完成';
            add(option, this.form)
              .then(res => {
                //添加成功
                this.$message ({
                  message: msg,
                  type: 'success'
                });
                //隐藏dialog
                this.dialog.show = false;
                this.$emit('update');
              })
              .catch(err => {
                console.log(err);
              });

          }
        });
      }
    }
  }
</script>

<style scoped>

</style>